<template>
  <div class="list-container">
    <div class="header-bar">
      <button
        title="刷新列表"
        @click="handleRefresh"
      >
        <i class="tim-icon-refresh" />
      </button>
    </div>
    <div class="scroll-container">
      <conversation-item
        v-for="conversation in conversationList"
        :key="conversation.conversationID"
        :conversation="conversation"
      />
    </div>
  </div>
</template>

<script>
import ConversationItem from './conversation-item'
import { mapState } from 'vuex'

import { showError, showSuccess } from '@/util/message'

export default {
  name: 'ConversationList',
  components: { ConversationItem },
  data() {
    return {
      isCheckout: false, // 是否正在切换会话
    }
  },
  computed: {
    ...mapState(['conversationList', 'currentConversation'])
  },
  mounted() {
    window.addEventListener('keydown', this.handleKeydown)
  },
  destroyed() {
    window.removeEventListener('keydown', this.handleKeydown)
  },
  methods: {
    handleRefresh() {
      this.refreshConversation()
    },
    refreshConversation() {
      this.$tim.getConversationList().then(() => {
        showSuccess('刷新成功')
      }).catch(error => {
        showError('刷新失败：' + error.message)
      })
    },
    handleKeydown(event) {
      if (event.keyCode !== 38 && event.keyCode !== 40 || this.isCheckout) {
        return
      }
      const currentIndex = this.conversationList.findIndex(
        item => item.conversationID === this.currentConversation.conversationID
      )
      if (event.keyCode === 38 && currentIndex - 1 >= 0) {
        this.checkoutPrev(currentIndex)
      }
      if (
        event.keyCode === 40 &&
        currentIndex + 1 < this.conversationList.length
      ) {
        this.checkoutNext(currentIndex)
      }
    },
    checkoutPrev(currentIndex) {
      this.isCheckout = true
      this.$store
        .dispatch(
          'checkoutConversation',
          this.conversationList[currentIndex - 1].conversationID
        )
        .then(() => {
          this.isCheckout = false
        })
        .catch(() => {
          this.isCheckout = false
        })
    },
    checkoutNext(currentIndex) {
      this.isCheckout = true
      this.$store
        .dispatch(
          'checkoutConversation',
          this.conversationList[currentIndex + 1].conversationID
        )
        .then(() => {
          this.isCheckout = false
        })
        .catch(() => {
          this.isCheckout = false
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
.list-container
  height 100%
  width 100%
  display flex
  flex-direction column // -reverse
  .header-bar
    flex-shrink 0
    height 50px
    border-bottom 1px solid $background-deep-dark
    padding 10px 10px 10px 20px
    button
      float right
      display: inline-block;
      cursor: pointer;
      background $background-deep-dark
      border: none
      color: $font-dark;
      box-sizing: border-box;
      transition: .3s;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      margin: 0 10px 0 0
      padding 0
      width 30px
      height 30px
      line-height 34px
      font-size: 24px;
      text-align: center;
      white-space: nowrap;
      border-radius: 50%
      outline 0
      &:hover
        // background $light-primary
        // color $white
        transform: rotate(360deg);
        color $light-primary
  .scroll-container
    overflow-y scroll
    flex 1
.bottom-circle-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.refresh {
  bottom: 70px;
}
</style>
